  import React, { type ReactNode } from "react";
  import { NavBar } from 'antd-mobile'
  import { LeftOutline } from "antd-mobile-icons";
  import { useNavigate } from "react-router-dom";
  import '../styles/components/navHeader.scss'

  interface NavHeaderProps {
    title: string; // 标题
    showBack?: boolean; // 是否显示返回按钮
    backPath?: string; // 返回路径，不传则使用浏览器历史返回
    onBack?: () => void; // 自定义返回函数
    right?: ReactNode; // 右侧内容
    fixed?: boolean; // 是否固定在顶部
  }

  const NavHeader: React.FC<NavHeaderProps> = ({
    title,
    showBack = true,
    backPath,
    onBack,
    right,
    fixed = true,
  }) => {
    const navigate = useNavigate();

    // 处理返回按钮点击
    const handleBack = () => {
      if (onBack) {
        onBack(); // 如果传入了自定义返回处理函数，则调用它
      } else if (backPath) {
        navigate(backPath); // 如果传入了返回路径，则导航到该路径
      } else {
        navigate(-1); // 默认使用浏览器历史返回
      }
    }

    return (
      <NavBar
        className={`common-nav-header ${fixed ? 'fixed' : ''}`}
        onBack={showBack ? handleBack : undefined}
        back={showBack ? <LeftOutline /> : null}
        right={right}
      >
        {title}
      </NavBar>
    )
  }

  export default NavHeader;